一个React Native项目-一些注意点

发表于   |   分类于   |  

对http网络请求的支持

由于在iOS9开始,Apple强制了https的请求.但是如果服务器还不支持,那么应该在plist中添加以下字段:
29000QQ20160901-2.png

这步要注意,ReactNative并没有聪明替你配置好这个iOS的环境,我是在各种网络请求都异常后,才发现的这个问题.

提取文件

因为要同时支持iOS和Android, 那么我们就不应该将布局代码写到index.android.js或者index.ios.js中,当然也不应该写好一个,然后copy到另一个,无论怎么说,如果分散,我们将面临维护多份代码的窘境.所以好的方式是,将实现提取出来,在index.android.js和index.ios.js中,只保持对接口文件的引用.类似下面:

1
2
3
4
5
6
7
class GUIShopping extends Component {
  render() {
    return (
      <Main/>
    );
  }
}

Android的启动页面

Android本身没有像iOS那么方便的配置启动页的方式,原生的方式是通过Activity来制造假象,同理,利用ReactNative还是要做这个处理.
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
class GUIShopping extends Component {
  render() {
    return (
        <Navigator
            initialRoute={{name:'启动页',component:LaunchImage}}
            configureScene={()=>{ return Navigator.SceneConfigs.PushFromRight; }}
            renderScene={(route,navigator)=>{
                            let Component = route.component;
                            return <Component {...route.passProps} navigator={navigator}/>
                        }} />
    );
  }
}

而LaunchImage就是一个普通的Component,里面有个定时器,在规定时间内切换到主页,看起来效果和iOS是一样的,主要代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class LaunchImage extends Component {
    render() {
        return (
                <Image source = {{uri:'launchimage'}} style={styles.launchImage}/>
        );
    }

    componentDidMount() {
        setTimeout(()=>{
            //页面的切换
            this.props.navigator.replace({
                component:Main,
            });
        },2000);

    }
}

ListView横向排版的实现

默认的ListView是和iOS的TableView类似的,也就是上下滑动,如果想要实现类似CollectionView的布局效果,那么需要做一些配置:

1
2
3
4
5
6
7
8
<ListView
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
              contentContainerStyle={styles.contentView}
              scrollEnabled={false}
          >

          </ListView>

contentView的实现如下:

1
2
3
4
5
contentView:{
       flexDirection:'row',
       flexWrap:'wrap',
       width:width,
   },

要点:

  1. 要指定ListView的宽度

  2. cell应该具备宽高(特别坑)

    其中第二条没有发现有资料提及,但是自己编码的时候发现,只有设置好cell的宽度和高度,才能实现预想的效果.
    最终效果如下:

    93550QQ20160901-3.png